
/*ratio.htm ---------------------------*/
#ratio{
	padding:0;border-top:2px solid $brand-dark-light;
	>*{
		display:table;width:100%;border-top:1px dotted $brand-dark-lighter;
		.item{padding:10px;display:table-cell;width:50%;text-align:center;background:#fff;border-right:1px solid $brand-dark-lighter;}
		.item:nth-last-child(2)~.item,.item:nth-last-child(2){width:50%;}
		.item:nth-last-child(3)~.item,.item:nth-last-child(3){width:33.33%;}
		.item:nth-last-child(4)~.item,.item:nth-last-child(4){width:25%;}
		.item:last-child{border-right:none;}
		a{color:$blue;}
		.tip{background:$gray-bg;border-bottom:1px solid $gray-line;padding:3px 0;color:$brand-dark-lighter;text-align:center;}
		.label{border:1px solid $brand-theme;color:$brand-theme;font-weight:normal;margin-left:10px;}
		.fa-map-marker{color:$brand-match;font-size:150%;margin-right:10px;}
	}
	h4.tit{margin:0;border:none;
		.item{padding-right:30px;text-align:center;position:relative;}
		a{position:absolute;right:10px;top:10px;color:$brand-dark-lighter;font-size:75%;}
		a:hover{color:$orange;}
	}
	.industry .item{
		vertical-align:middle;
		small{display:block;color:$brand-dark-light;margin-top:5px;}
	}
	.bus .item,.facility .item{
		padding:0;
		.con{
			padding:20px 20px;text-align:left;
			p{color:$brand-dark-light;margin-top:3px;}
			p:last-child{margin-bottom:0;}
		}
	}
	.pic img{width:80%;margin:10px auto;overflow:hidden;}
	.price .item{
		dl{margin:0;padding:10px 0;}
		dt{width:40%;font-weight:normal;color:$brand-dark-lighter;}
		dd{
			margin-left:40%;text-align:left;color:$brand-dark;
			strong{display:inline-block;width:7em;text-align:right;margin-right:5px;font-family:verdana;font-size:130%;}
			&:nth-child(-n+4) strong{color:$brand-theme;}
		}
	}
	.total .item{
		dl{padding:20px 10px;margin:0;}
		dt{width:5em;@include opacity(.6);}
		dd{margin-left:6em;text-align:left;}
		i{font-size:200%;position:relative;top:-5px;color:$brand-dark-lighter;}
		.hot-1 i:first-child{color:$blue;@include opacity(.6);}
		.hot-2 i:nth-child(-n+2){color:$blue;@include opacity(.6);}
		.hot-3 i:nth-child(-n+3){color:$blue;@include opacity(.6);}
		.hot-4 i:nth-child(-n+4){color:$blue;@include opacity(.6);}
		.hot-5 i:nth-child(-n+5){color:$blue;@include opacity(.6);}
	}
	.item.first{
		background:rgba($blue,.06);
		.tip{background:rgba(#000,.03);border-color:rgba(#000,.04);}
	}
	@media screen and (max-width: 991px){
		&{
			width: 100%;overflow-y: hidden;overflow-x:auto;
			.item{min-width:300px;}
			.pic{
				.item{padding:0;}
				img{width:100%;margin:0;}
			}
			.price .item{
				dl{padding:0;position:relative;}
				dt{width:7em;position:absolute;left:0;}
				dd{
					margin-left:8em;
					strong{width:8em;}
				}
			}
			.total .item{
				dl{position:relative;}
				dt{position:absolute;left:10px;}
			}
		}
	}
}




.form-con{
	padding:0;margin-top:-20px;
	h2{
		background:#fff;border-bottom:2px solid $brand-dark;
		strong{display:block;padding-top:15px;padding-bottom:15px;font-size:24px;font-weight:normal;color:$brand-dark-light;}
		small{margin-left:20px;@include opacity(.6);}
	}
	&>.container{
		background:#fff;margin-top:30px;margin-bottom:30px;padding-top:30px;padding-bottom:30px;
		.form-group{padding-top:10px;padding-bottom:10px;}
	}
	@media(max-width:991px){
		h2{margin-bottom:0;}
		.container{width:100%;margin:0;}
	}
	.main-do{text-align:center;margin-top:30px;}
	/*register.htm ------------------------*/
	&#reg{
		.code{
			padding-right:170px;position:relative;
			img{position:absolute;right:20px;height:34px;top:0;}
		}
	}
	/*publish.htm ---------------------*/
	&#publish{
		.step{
			margin-bottom:0;background:none;padding:0;@include border-radius(6px);overflow:hidden;
			li{
				background:lighten($brand-dark-lighter,10%);height:40px;position:relative;padding-left:40px;line-height:40px;overflow:hidden;float:left;width:33.33%;list-style: none;
				&:after{content:"";border:20px solid transparent;border-left-color:lighten($brand-dark-lighter,10%);position:absolute;left:0;z-index:100;}
				&:before{content:"";@include size(10px,100%);position:absolute;left:-10px;top:0;@include box-shadow(0 0 40px rgba(0,0,0,.6));}
				&:first-child{
					padding-left:20px;
					&:after,&:before{display:none;}
				}
				i{margin-right:10px;display:inline-block;@include square(30px);@include border-radius(100%);text-align:center;line-height:30px;background:rgba($brand-dark,.2);font-style:normal;color:#fff;font-weight:bold;}
				strong{color:$brand-dark-light;}
				&.active{
					background:$brand-theme;
					i{background:none;border:2px solid rgba(#fff,.5);line-height:28px;}
					strong{color:#fff;}
				}
				&.active+li:after{border-left-color:$brand-theme;}
			}
			@media(max-width:991px){
				&{padding:10px 15px;}
				li:first-child{@include border-left-radius(6px);}
				li:last-child{@include border-right-radius(6px);}
			}
			@media(max-width:520px){
				li{
					display:block;float:inherit;width:100%;@include border-radius(6px);
					&:first-child{padding-left:40px;@include border-radius(6px);}
					&:last-child{@include border-radius(6px);}
					&:after,&:before,&:not(.active){display:none;}
				}
			}
		}
		.type{
			p{@include opacity(.6);text-align:center;padding-bottom:10px;}
			.con{display:table;width:80%;margin:0 auto;}
			.con+.con{
				margin-top:40px;background:rgba($brand-dark-lighter,.2);@include border-radius(4px);padding:20px;
				label{padding:5px 7px;@include text-overflow();max-width:99%;}
				label>div{margin-right:5px;}
			}
			@media(max-width:991px){
				.con{width:100%;}
			}
			.item{
				padding:10px 0;border-left:1px dotted $brand-dark-light;width:33.3%;display:table-cell;text-align:center;vertical-align:middle;
				&:first-child{border:none;}
				label{margin-left:10px;font-weight:normal;cursor:pointer;}
				ul{
					padding:0;list-style:none;margin:0;
					li{
						padding:5px 0;
					}
				}
			}
			@media(max-width:767px){
				.con{display:block;}
				.con+.con{clear:both;@include clearfix();}
				.item{
					width:100%;display:block;border:none;border-top:1px dotted $brand-dark-light;
					&:first-child{border:none;}
					ul{clear:both;@include clearfix();}
					@media(min-width:450px){ul{margin:0 auto;width:60%;}}
					li{width:50%;float:left;}
				}
				.checkbox-inline{float:left;display:block;width:33.33%;padding:0 0 10px 0;margin:0;text-align:left;}
				@media(max-width:450px){.checkbox-inline{width:50%;}}
			}
		}
		.selected{
			margin-bottom:20px;background:rgba($brand-theme,.1);padding:20px;text-align:center;
			span{
				color:$brand-theme;margin-right:10px;font-size:120%;
				&:before,&:after{@include opacity(.3);}
				&:before{content:"[";margin-right:3px;}
				&:after{content:"]";margin-left:3px;}
			}
			@media(max-width:767px){span:nth-child(3){display:block;}}

		}
		.area{
			padding-top:0;padding-left:0;padding-right:0;
			p{@include opacity(.6);padding:0 20px;padding-bottom:10px;}
			.item{padding:0 20px;}
			h4{border-bottom:1px dotted $brand-dark-lighter;padding-bottom:10px;}
			.con{padding:0 0 30px 0;margin-left:-20px;}
			label{margin-left:20px;margin-top:10px;}
		}
		.more{
			padding-top:0;padding-left:0;padding-right:0;
			.form{margin:20px;}
			.list-inline{
				margin:0;
				li{
					@include size(80px,60px);overflow:hidden;position:relative;background-position:center center;background-size:contain;background-repeat:no-repeat;
					i{@include center();@include square(100%);text-align:center;line-height:60px;background:rgba($brand-dark,.5);color:#fff;font-size:150%;}
					&:not(.add){
						i{display:none;}
						&:hover i{display:block;}
					}
					.btn-file{@include size(100%,60px);background: none;border: none;line-height:60px;padding: 0;font-size: 120%;@include opacity(.6);@include box-shadow(0 0 0 rgba(0,0,0,0));}
					.btn.btn-file>input[type=file]{position:absolute;top:0;right:0;min-width:100%;min-height:100%;@include opacity(0);outline:none;background:#fff;cursor:inherit;display:block;}
				}
			}
			@media(max-width:767px){
				[class^="col-"],
				[class*="col-"]{padding:0 10px;}
				div[class^="col-xs-"],
				div[class*="col-xs-"]{margin-top:5px;}
				.line+div{padding-top:10px;display:block;clear:both;}
			}
		}
		.finish{
			@media(min-width:768px){
				&{min-height:300px;}
			}
			.con{
				background:rgba($green,.1);padding:30px 40px;
				i{font-size:300%;color:$green;}
				&>strong{color:$brand-dark;font-weight:normal;font-size:200%;margin-left:20px;position:relative;top:-5px;}
				p{
					margin-top:15px;padding-top:15px;color:$brand-dark-light;border-top:1px dotted rgba($brand-dark,.3);
					a{display:block;color:$blue;text-decoration:none;}
					a strong{color:$brand-theme;margin-right:5px;font-weight:normal;}
				}
				.btn:not(:hover){background:none;}
				@media(min-width:768px){
					&{padding-left:120px;position:relative;}
					i{position:absolute;top:30px;left:50px;}
					&>strong{margin:0;top:0;}
				}
				@media(max-width:450px){
					&{padding:20px;}
				}
				
			}
		}
	}


	/*perCenter.htm ---------------------*/
	.list-tab~&{
		margin-top:5px;
		&#publish .more{
			padding-top:20px;padding-bottom:20px;
			.area-choose{
				i{color:$brand-match;font-size:120%;margin-right:5px;}
				span{
					color:$blue;
					&:nth-last-child(n+2):before{content:"/";margin:0 3px;color:rgba($brand-dark-lighter,.6);}
					&:nth-child(2):before{display:none;}
				}
				.btn{margin-left:5px;}
				@media(max-width:767px){
					.btn{display:block;width:100px;margin-top:10px;margin-left:0;}
				}
			}
		}
	}
	&#perCenter{
		#per-base{
			dt,dd{padding-top:10px;padding-bottom:10px;}
			@media(min-width:768px){
				dl{margin:0 auto;width:65%;}
			}
		}
		.list-so{
			margin-bottom:10px;
			@media(max-width: 767px){
				.col-xs-12{margin-top:10px;}
			}

		}
		#per-pub,#per-fav{
			th{@include opacity(.6);font-weight:normal;}
			img{@include size(80px,60px);overflow:hidden;}
			dl{margin:0;}
			dt{width:80px;}
			dd{
				margin-left:90px;
				a{color:$blue;font-size:120%;}
				p{color:$brand-dark;margin:5px 0 0;}
				.ar{
					span:nth-last-child(n+2):after{content:"/";margin:0 5px;@include opacity(.3);}
					strong{color:$brand-theme;font-weight:normal;}
				}
				.att{font-size:75%;padding:0 5px;line-height:20px;height:24px;min-width:110px;}
				.time{
					@include opacity(.6);font-size:12px;
					i{margin-right:5px;}
				}
			}
			@media(max-width:767px){
				dt{display:none}
				dd{margin-left:0}
			}
			.price,.area{
				color:$brand-dark-light;
				strong{color:$brand-theme;margin-right:3px;font-size:120%;font-family:verdana;}
			}
			.price{
				strong:nth-last-child(n+3):first-child{
					display:block;
					&:after{content:"~";color:$brand-dark-light;font-family:arial;margin:0 3px;}
				}

			}
			.view{
				color:$brand-dark-light;font-size:75%;
				i{margin-right:5px;@include opacity(.6);}
				.fa-heart{color:$blue;@include opacity(1);}
			}
			.do{
				@include text-overflow();
				a{margin-right:10px;color:$brand-dark;}
			}

		}
	}

}


.area-pop{
	p{@include opacity(.6);padding:0;padding-bottom:10px;}
	h4{border-bottom:1px dotted $brand-dark-lighter;padding-bottom:10px;}
	.con{padding:0 0 30px 0;}
	label{margin-top:10px;padding-bottom:10px;}
	label:first-child{margin-left:10px;}
}






